<template>
    <div class="tootip-content zw-common-scrollbar">
        <div>推广活动是指：淘宝/天猫的淘口令、淘暗号、优惠券等活动。</div>
        <div>以下是统计指标说明：</div>
        <table class="tootip-table">
            <thead>
                <tr>
                    <th class="pointer text-left">指标名</th>
                    <th class="remark text-left">备注字段</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in tableData" :key="item.id">
                    <td class="pointer">{{ item.pointer }}</td>
                    <td class="remark">{{ item.remark }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script setup>
import { reactive } from 'vue';
const tableData = reactive([
    {
        id: 1,
        pointer: '触达人数',
        remark: '通过推广链接触达的用户数'
    },
    {
        id: 2,
        pointer: '引导访客数',
        remark: '通过推广链接引导的访客数'
    },
    {
        id: 3,
        pointer: '引导进店浏览量',
        remark: '通过推广链接引导的进店的浏览量。'
    },
    {
        id: 4,
        pointer: '下单订单数',
        remark: '通过推广链接引导的用户下单的订单数。'
    },
    {
        id: 5,
        pointer: '下单用户数',
        remark: '通过推广链接引导的用户中下单的用户数。'
    },
    {
        id: 6,
        pointer: '下单总金额',
        remark: '通过推广链接引导的用户下单的订单总金额。'
    },
    {
        id: 7,
        pointer: '支付订单数',
        remark: '通过推广链接引导的用户下单并支付的订单总数。（包含支付后退款的订单）'
    },
    {
        id: 8,
        pointer: '支付用户数',
        remark: '通过推广链接引导的用户下单并支付的订单用户数。（包含支付后退款的订单的用户）'
    },
    {
        id: 9,
        pointer: '支付总金额',
        remark: '通过推广链接引导的用户下单并支付的订单总金额。（包含支付后退款的订单）'
    },
    {
        id: 10,
        pointer: '加购人数',
        remark: '推广链接引导的用户中加入商品购物车的人数（去重用户）'
    },
    {
        id: 11,
        pointer: '收藏人数',
        remark: '推广链接引导的用户中收藏商品的人数（去重用户）'
    }
]);
</script>

<style lang="scss" scoped>
.tootip-content {
    width: 680px;
    max-height: 480px;
    overflow-y: auto;
}

:deep(.el-table) {
    position: static;
}

.tootip-table {
    width: 100%;
    font-size: 12px;
    font-family: PingFangSC-Regular, 'PingFang SC';
    font-weight: 400;
    color: #fff;

    .pointer {
        width: 90px;
    }

    thead,
    th {
        border: 1px solid #fbfbfb;
        padding: 11px 14px;
    }

    table,
    td {
        border: 1px solid #fbfbfb;
        padding: 11px 14px;
        height: 36px;
        box-sizing: border-box;
    }
}

.text-left {
    text-align: left;
}
</style>
